<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* *{
            padding: 0;
            margin: 0;
        } */
        ul {
            /* width: 1200px; */
            /* height: 1000px; */
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;
            /* margin: 100px auto; */

        }

        ul li {
            /* width: 200px;
            height: 400px; */
            display: flex;
            flex-direction: column;
            list-style: none;
            border: 1px solid #ccc;
            padding: 30px;
            box-shadow: 0px 0px 5px 0px #000;
        }

        ul li .p1 {
            text-decoration: line-through;
        }

        ul li .p2 {
            color: red;
        }

        /* .btn01 {
            position: absolute;
            top: 0;
            left: 10px;
        }

        .btn02 {
            position: absolute;
            left: 40px;
            top: 0;
        }

        .btn03 {
            position: absolute;
            left: 80px;
            top: 0;
        } */
    </style>
</head>

<body>
    <button id="btn01">根据价格排序</button>
    <button id="btn02">根据销量排序</button>
    <button id="btn03">根据评价排序</button>
    <ul id="content">

    </ul>
</body>

</html>
<script>
    var data = [{
        id: '001',
        name: 'iphone7 plugs',
        imgurl: 'img/ip7.jpg',
        price: 5899.00,
        sale: 5888.00,
        color: '土豪金',
        evaluate: 288,
        sales: 1230
    }, {
        id: '002',
        name: 'Note7',
        imgurl: 'img/note7.jpg',
        price: 3899.00,
        sale: 998.00,
        color: '黑色',
        evaluate: 289,
        sales: 439
    }, {
        id: '003',
        name: '荣耀7',
        imgurl: 'img/honor7.jpg',
        price: 1999.00,
        sale: 1899.00,
        color: '白色',
        evaluate: 438,
        sales: 908
    }, {
        id: '004',
        name: 'iphone7 plugs',
        imgurl: 'img/ip7.jpg',
        price: 5999.00,
        sale: 5808.00,
        color: '土豪金',
        evaluate: 223,
        sales: 986
    }, {
        id: '005',
        name: 'Note7',
        imgurl: 'img/note7.jpg',
        price: 3892.00,
        sale: 998.00,
        color: '黑色',
        evaluate: 88,
        sales: 8798
    }, {
        id: '006',
        name: '荣耀7',
        imgurl: 'img/honor7.jpg',
        price: 1929.00,
        sale: 1099.00,
        color: '白色',
        evaluate: 2088,
        sales: 453
    }, {
        id: '007',
        name: 'iphone7 plugs',
        imgurl: 'img/ip7.jpg',
        price: 4899.00,
        sale: 2888.00,
        color: '土豪金',
        evaluate: 2880,
        sales: 88
    }, {
        id: '008',
        name: 'Note7',
        imgurl: 'img/note7.jpg',
        price: 5876.00,
        sale: 998.00,
        color: '黑色',
        evaluate: 3288,
        sales: 99
    }, {
        id: '009',
        name: '荣耀7',
        imgurl: 'img/honor7.jpg',
        price: 4999.00,
        sale: 1899.00,
        color: '白色',
        evaluate: 1288,
        sales: 645
    }, {
        id: '010',
        name: 'iphone7 plugs',
        imgurl: 'img/ip7.jpg',
        price: 5888.00,
        sale: 2899.00,
        color: '土豪金',
        evaluate: 2288,
        sales: 34
    }, {
        id: '011',
        name: 'Note7',
        imgurl: 'img/note7.jpg',
        price: 3299.00,
        sale: 978.00,
        color: '黑色',
        evaluate: 28,
        sales: 1213
    }, {
        id: '012',
        name: '荣耀7',
        imgurl: 'img/honor7.jpg',
        price: 1976.00,
        sale: 1899.00,
        color: '白色',
        evaluate: 3243,
        sales: 123
    }];
    function fn() {
        for (var i = 0; i < data.length; i++) {
            content.innerHTML += '<li>' +
                // '<h2>'+ data[i].id+'</h2>'+

                '<img src="./' + data[i].imgurl + '"alt="">' +
                '<h1>' + data[i].name + '</h1>' +
                '<p>' + '颜色:' + data[i].color + '</p>' +
                '<p class="p1">' + '原价:' + data[i].price + '</p>' +
                '<p class="p2">' + '现价:' + data[i].sale + '</p>' +
                '<p>' + '销量:' + data[i].sales + '</p>' +
                '<p>' + '评价:' + data[i].evaluate + '</p>' +
                '</li>'
        }
    }
    fn()
    btn01.onclick = function () {
        content.innerHTML = ""
        console.log(13);
        data.sort(function (a, b) {
            return b.sale - a.sale
        })
        fn()
    }

    btn02.onclick = function () {
        content.innerHTML = ""
        data.sort(function (a, b) {
            return b.sales - a.sales
        })
        fn()
    }

    btn03.onclick = function () {
        content.innerHTML = ""
        data.sort(function (a, b) {
            return b.evaluate - a.evaluate
        })
        fn()
    }


</script>